App.require(function () {
    var app = App.getCurrent();

    app.definePage("strdatarangeselecttime", {
        getDomObj: function () {
            this.attachDom(".select-hour-start", "selectHourStart")
                .attachDom(".select-minute-start", "selectMinuteStart")
                .attachDom(".select-hour-end", "selectHourEnd")
                .attachDom(".select-minute-end", "selectMinuteEnd")
                .attachDom(".select-hour-start ul", "selectHourUlStart")
                .attachDom(".select-minute-start ul", "selectMinuteUlStart")
                .attachDom(".select-hour-end ul", "selectHourUlEnd")
                .attachDom(".select-minute-end ul", "selectMinuteUlEnd")
                .attachDom(".select-hour-start li.selected", "hourSelectedStart")
                .attachDom(".select-minute-start li.selected", "minuteSelectedStart")
                .attachDom(".select-hour-end li.selected", "hourSelectedEnd")
                .attachDom(".select-minute-end li.selected", "minuteSelectedEnd")
                .attachEvent("selectHourStart", "click", this.clickStartHourHandler, false)
                .attachEvent("selectHourStart", "mousewheel", this.wheelStartHourHandler, false)
                .attachEvent("selectHourStart", "DOMMouseScroll", this.scrollStartHourHandler, false)
                .attachEvent("selectHourStart", "iconclick", this.iconClickStartHourHandler, false)
                .attachEvent("selectMinuteStart", "mousewheel", this.wheelStartMinuteHandler, false)
                .attachEvent("selectMinuteStart", "DOMMouseScroll", this.scrollStartMinuteHandler, false)
                .attachEvent("selectMinuteStart", "iconclick", this.iconClickStartMinuteHandler, false)
                .attachEvent("selectMinuteStart", "click", this.clickStartMinuteHandler, false)
                .attachEvent("selectHourEnd", "click", this.clickEndHourHandler, false)
                .attachEvent("selectHourEnd", "mousewheel", this.wheelEndHourHandler, false)
                .attachEvent("selectHourEnd", "DOMMouseScroll", this.scrollEndHourHandler, false)
                .attachEvent("selectHourEnd", "iconclick", this.iconClickEndHourHandler, false)
                .attachEvent("selectMinuteEnd", "mousewheel", this.wheelEndMinuteHandler, false)
                .attachEvent("selectMinuteEnd", "DOMMouseScroll", this.scrollEndMinuteHandler, false)
                .attachEvent("selectMinuteEnd", "iconclick", this.iconClickEndMinuteHandler, false)
                .attachEvent("selectMinuteEnd", "click", this.clickEndMinuteHandler, false)
        },
        operateHour: function (num, str) {
            var time = this.data.startTime, 
                selectHourDom = this.domList.selectHourStart, 
                hourSelectedDom = this.domList.hourSelectedStart,
                domStr = "hourSelectedStart",
                hourSelectUl = this.domList.selectHourUlStart;

            if (str !== "start") {
                time = this.data.endTime;
                selectHourDom = this.domList.selectHourEnd;
                hourSelectedDom = this.domList.hourSelectedEnd;
                domStr = "hourSelectedEnd";
                hourSelectUl = this.domList.selectHourUlEnd;
            }

            if (num > 0) {
                if (time.hour < 23) time.hour++;
            }
            else {
                if (time.hour > 0) time.hour--;
            }
            selectHourDom.querySelector("ul").style.transform = 'translateY(' + (3 - time.hour) * 28 + 'px)';
            this.parent.staticPage.changeTimeStr(str);
            hourSelectedDom.classList.remove("selected");
            var target = hourSelectUl.children[time.hour + 3];
            target.classList.add("selected");
            this.domList[domStr] = target;
        },
        operateMinute: function (num, str) {
            var time = this.data.startTime, 
                selectMinuteDom = this.domList.selectMinuteStart, 
                minuteSelectedDom = this.domList.minuteSelectedStart,
                domStr = "minuteSelectedStart",
                minuteSelectUl = this.domList.selectMinuteUlStart;

            if (str !== "start") {
                time = this.data.endTime;
                selectMinuteDom = this.domList.selectMinuteEnd;
                minuteSelectedDom = this.domList.minuteSelectedEnd;
                domStr = "minuteSelectedEnd";
                minuteSelectUl = this.domList.selectMinuteUlEnd;
            }
            if (num > 0) {
                if (time.minute < 59) time.minute++;
            }
            else {
                if (time.minute > 0) time.minute--;
            }
            selectMinuteDom.querySelector("ul").style.transform = 'translateY(' + (3 - time.minute) * 28 + 'px)';
            this.parent.staticPage.changeTimeStr(str);
            minuteSelectedDom.classList.remove("selected");
            var target = minuteSelectUl.children[time.minute + 3];
            target.classList.add("selected");
            this.domList[domStr] = target;
        },
        _operationHour: function (component, str) {
            if (component.dataset.action == "down") {
                this.operateHour(1, str);
            }
            else if (component.dataset.action == "up") {
                this.operateHour(-1, str);
            }
        },
        _clickHourTarget: function (target, str) {
            if (target.nodeName.toUpperCase() == "LI") {
                var time = this.data.startTime, hourSelected = this.domList.hourSelectedStart, domStr = "hourSelectedStart";
                if (str !== "start") {
                    time = this.data.endTime;
                    hourSelected = this.domList.hourSelectedEnd;
                    domStr = "hourSelectedEnd";
                }
                time.hour = parseInt(target.textContent);
                this.parent.staticPage.changeTimeStr(str);
                target.parentNode.style.transform = 'translateY(' + (3 - time.hour) * 28 + 'px)';
                hourSelected.classList.remove("selected");
                target.classList.add("selected");
                this.domList[domStr] = target;
            }
        },
        _clickMinuteTarget: function (target, str) {
            if (target.nodeName.toUpperCase() == "LI") {
                var time = this.data.startTime, minuteSelected = this.domList.minuteSelectedStart, domStr = "minuteSelectedStart";
                if (str !== "start") {
                    time = this.data.endTime;
                    minuteSelected = this.domList.minuteSelectedEnd;
                    domStr = "minuteSelectedEnd";
                }
                time.minute = parseInt(target.textContent);
                this.parent.staticPage.changeTimeStr(str);
                target.parentNode.style.transform = 'translateY(' + (3 - time.minute) * 28 + 'px)';
                minuteSelected.classList.remove("selected");
                target.classList.add("selected");
                this.domList[domStr] = target;
            }
        },
        clickStartHourHandler: function (ev) {
            this._clickHourTarget(ev.target, "start");
        },
        clickEndHourHandler: function (ev) {
            this._clickHourTarget(ev.target, "end");
        },
        wheelStartHourHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateHour(ev.wheelDelta, "start");
        },
        scrollStartHourHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateHour(-ev.delta, "start");
        },
        iconClickStartHourHandler: function (ev) {
            this._operationHour(ev.detail.component, "start");
        },
        _operationMinute: function (component, str) {
            if (component.dataset.action == "down") {
                this.operateMinute(1, str);
            }
            else if (component.dataset.action == "up") {
                this.operateMinute(-1, str);
            }
        },
        wheelStartMinuteHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateMinute(ev.wheelDelta, "start");
        },
        scrollStartMinuteHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateMinute(-ev.delta, "start");
        },
        iconClickStartMinuteHandler: function (ev) {
            this._operationMinute(ev.detail.component, "start");
        },
        clickStartMinuteHandler: function (ev) {
            this._clickMinuteTarget(ev.target, "start");
        },
        wheelEndHourHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateHour(ev.wheelDelta, "end");
        },
        scrollEndHourHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateHour(-ev.delta, "end");
        },
        iconClickEndHourHandler: function (ev) {
            this._operationHour(ev.detail.component, "end");
        },
        wheelEndMinuteHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this.operateMinute(ev.wheelDelta, "end");
        },
        scrollEndMinuteHandler: function (ev) {
            this.operateMinute(-ev.delta, "end");
        },
        iconClickEndMinuteHandler: function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            this._operationMinute(ev.detail.component, "end");
        },
        clickEndMinuteHandler: function (ev) {
            this._clickMinuteTarget(ev.target, "end");
        },
        render: function (next) {
            var data = this.data, parentData = this.parent.data;
            data.startTime = parentData.startTime;
            data.endTime = parentData.endTime;
            data.selectStartHoursHtml = this.computedHours(data.startTime.hour);
            data.selectStartMinutesHtml = this.computedMinutes(data.startTime.minute);
            data.selectNextHoursHtml = this.computedHours(data.endTime.hour);
            data.selectNextMinutesHtml = this.computedMinutes(data.endTime.minute);
            this.data.startHourStyle = "transform: translateY(" + (3 - data.startTime.hour) * 28 + "px)";
            this.data.startMinuteStyle = "transform: translateY(" + (3 - data.startTime.minute) * 28 + "px)";
            this.data.endHourStyle = "transform: translateY(" + (3 - data.endTime.hour) * 28 + "px)";
            this.data.endMinuteStyle = "transform: translateY(" + (3 - data.endTime.minute) * 28 + "px)";
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        computedHours: function (hour) {
            var html = "";
            for (var i = 0; i < 24; i++) {
                var str = ("0" + i).slice(-2);
                if (i == hour) html += '<li class="selected">' + str + '</li>';
                else html += '<li>' + str + '</li>';
            }
            return html;
        },
        computedMinutes: function (minute) {
            var html = "";
            for (var i = 0; i < 60; i++) {
                var str = ("0" + i).slice(-2);
                if (i == minute) html += '<li class="selected">' + str + '</li>';
                else html += '<li>' + str + '</li>';
            }
            return html;
        }
    })
})